<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-export-btn type="success" :columns="table.columns" />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key />
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" v-bind="table" />
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert">

		</cl-upsert>
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, inject, reactive, ref } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useRefs } from "/@/core";

export default defineComponent({
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					prop: "course_id",
					label: "课程ID",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入课程ID"
						}
					},
					rules: {
						required: true,
						message: "课程ID不能为空"
					}
				},
				{
					prop: "course_name",
					label: "课程名称",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入课程名称"
						}
					},
					rules: {
						required: true,
						message: "课程名称不能为空"
					}
				},
				{
					prop: "learn_age",
					label: "学习年龄",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入学习年龄"
						}
					},
					rules: {
						required: true,
						message: "学习年龄不能为空"
					}
				},
				{
					prop: "equipment",
					label: "使用器材",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入使用器材"
						}
					},
					rules: {
						required: true,
						message: "使用器材不能为空"
					}
				},
				{
					prop: "course_function",
					label: "课程功能",
					span: 24,
					hook: {
						bind: (value: string, form: any) => {
							// value 是与 prop 绑定的值
							// form 是表单值
							// console.log(eval("(" + value + ")"),"///////////");
							console.log(value,"///////////");
							if (form.course_function !== ""){
								return eval("(" + form.course_function + ")")
							}else{
								return ""
							}
							console.log(eval("(" + form.course_function + ")"),"<<<<<<<<<<<<<");
							// return value.split(",").map(Number).filter(Boolean); // 结果为：[1, 2, 3]
						},
						// bind: ['split'],  // 绑定通道流程，分割 -> 转成number -> 绑定值
						// submit: ['join'],	// 提交通道流程，逗号拼接 -> 提交
						submit: (value: string, form: any) => {
							// value 是与 prop 绑定的值
							// form 是表单值
							console.log(JSON.stringify(value),"///////////");
							console.log(form,"<<<<<<<<<<<<<");
							return JSON.stringify(value);
							// return value.split(",").map(Number).filter(Boolean); // 结果为：[1, 2, 3]
						},
					},
					component: {
						// name: "slot-course_function",
						name: "courseFunctionSelect",
						// type: "textarea",
						// options: [
						// 	{ label: "编程难度", value: "programming_level", required: false },
						// 	{ label: "搭建难度", value: "construct_level", required: false },
						// 	{ label: "科学目标", value: "science_goals", required: false },
						// 	{ label: "编程目标", value: "programming_goals", required: false },
						// 	{ label: "工程设计目标", value: "engineering_design_goals", required: false },
						// 	{ label: "内容标签", value: "content_label", required: false },
						// 	{ label: "机械原理标签", value: "mechanical", required: false },
						// 	{ label: "程序设计标签", value: "program_design", required: false },
						// 	{ label: "课程造型标签", value: "course_shape", required: false },
						// 	{ label: "幼儿五大主题", value: "child_five_theme", required: false },
						// ],
						props: {
							multiple: true,
							placeholder: "请选择课程启用的功能"
						}
					}
				},
				{
					prop: "note",
					label: "备注",
					span: 24,
					component: {
						name: "el-input",
						type: "textarea",
						props: {
							placeholder: "请输入备注"
						}
					}
				},
			]
		});

		// 表格配置
		const table = reactive<Table>({
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					type: "index",
					label: "#",
					width: 60
				},
				{
					prop: "course_id",
					label: "课程ID"
				},
				{
					prop: "course_name",
					label: "课程名称"
				},
				{
					prop: "learn_age",
					label: "学习年龄"
				},
				{
					prop: "equipment",
					label: "使用器材"
				},
				{
					label: "操作",
					type: "op"
				}
			]
		});

		const options = ref([
			{ label: "编程难度", value: "programming_level", required: false },
			{ label: "搭建难度", value: "construct_level", required: false },
			{ label: "科学目标", value: "science_goals", required: false },
			{ label: "编程目标", value: "programming_goals", required: false },
			{ label: "工程设计目标", value: "engineering_design_goals", required: false },
			{ label: "内容标签", value: "content_label", required: false },
			{ label: "机械原理标签", value: "mechanical", required: false },
			{ label: "程序设计标签", value: "program_design", required: false },
			{ label: "课程造型标签", value: "course_shape", required: false },
			{ label: "幼儿五大主题", value: "child_five_theme", required: false },
			{ label: "文件下载", value: "file", required: false },
		])

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.courseTypeService).done();
			app.refresh();
		}

		return {
			refs,
			setRefs,
			upsert,
			table,
			onLoad,
			options
		};
	}
});
</script>
